<template>
  <view :style="colorStyle">
    <view
      class="tabsModule flex sa"
      :style="{ position: `${fixed ? 'fixed' : ''}` }"
    >
      <view
        class="tablist"
        v-for="(item, index, key) in list"
        @click="tablistChange(index)"
        :key="key"
      >
        <view
          class="name c858585 f32"
          :style="{
            color: `${tablistindex == index ? 'var(--view-theme)' : ''}`,
          }"
        >
          {{ item.name }}
        </view>
        <view class="border" v-if="tablistindex == index"> </view>
      </view>
    </view>
    <view class="" style="height: 88rpx" v-if="fixed"> </view>
  </view>
</template>

<script>
import colors from "@/mixins/color";
export default {
  mixins: [colors],
  name: "tabs",
  props: {
    list: {
      default: [],
    },
    fixed: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      tablistindex: 0,
    };
  },
  methods: {
    tablistChange(index) {
      this.tablistindex = index;
      this.$emit("tablistChange", index);
    },
  },
};
</script>

<style lang="scss" scoped>
.tabsModule {
  // position: fixed;
  width: 100%;
  padding: 22rpx 0 0;
  background: #fff;
  z-index: 99;

  .tablist {
    .name {
    }

    .border {
      margin: 18rpx auto 0;
      width: 64rpx;
      height: 4rpx;
      border-radius: 6rpx;
      background: var(--view-theme);
    }
  }
}
</style>
